<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户留存率统计</title>
    <%@include file="/WEB-INF/layouts/index-header.jsp" %>
    <script src="${staticPath}/commons/echarts/echarts.js" type="text/javascript"></script>
    <style type="text/css">
        .level1 {
            background-color: #C3E8F9;
            border: none;
        }

        .level2 {
            background-color: #95D8F5;
            border: none;
        }

        .level3 {
            background-color: #61C7ED;
            border: none;
        }

        .level4 {
            background-color: #38B4E4;
            border: none;
        }

        .level5 {
            background-color: #fff;
            border: none;
        }

    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row" style="padding:15px;">
        <div id="tool">
            <form id="searchForm" class="form-inline">
                <div class="form-group">
                    <label class="">用户注册时间：</label>
                    <input class="t-datetimepicker form-control" id="startTime" value="${startDate}"/> -
                    <input class="t-datetimepicker form-control" id="endTime" value="${endDate}"/>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-primary radius" onclick="generatingChart()">
                        生成
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div id="newAccount" style="width: 100%;height:400px;padding-top: 30px"></div>
</div>
<div class="container-fluid hidden-xs" style="max-height: 500px;">
    <h4 style="text-align: center;padding-bottom: 20px;font-weight: bold;color: #262626"
        id="tableTitle">${titleStartDate}-${titleEndDate} 用户留存率详情</h4>
    <table id="table"></table>
</div>
<script type="text/javascript">
    window.parent.changeTitle('用户留存率统计');
    var myChart;
    var myTableTitle;
    $(function () {
        $('.t-datetimepicker').datetimepicker({
            language: 'zh-CN',
            autoclose: true,
            format: "yyyy-mm-dd",
            startView: 2,
            minView: 2,
        });
        var mainHeight = $(window).height() * 0.8;
        $('#newAccount').height(mainHeight < 350 ? 350 : mainHeight);
        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(document.getElementById('newAccount'));
        getData('${ctx}/admin/report/getUserRetention?startTime=' + $('#startTime').val() + '&endTime=' + $('#endTime').val() + '&type=1');
    });

    function getData(url) {
        topLayer.load();
        $.get(url, function (resp) {
            var option = {
                // Make gradient line here
                visualMap: {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    min: 0,
                    max: 0,
                },
                title: {
                    left: 'center',
                    text: resp.body.title
                },
                tooltip: {
                    trigger: 'axis',
//                    formatter: "{b}<br/>{c}台新安装设备"
                },
                xAxis: {
                    data: resp.body.dates
                },
                yAxis: {
                    splitLine: {show: false},
                },
                grid: {
                    bottom: '30%',
                    //height: 350
                },
                series: {
                    name: '用户留存个数',
                    type: 'line',
                    showSymbol: false,
                    symbolSize: 10,
                    smooth: true,
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color: 'rgb(255, 70, 131)'
                        }
                    },
                    data: resp.body.counts,
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(255, 158, 68)'
                            }, {
                                offset: 1,
                                color: 'rgb(255, 70, 131)'
                            }])
                        }
                    },
                }
            };
            var title = resp.body.title;
            if (title) {
                myTableTitle = title.substr(0, 23);
            }
            myChart.setOption(option);
            $('#tableTitle').text(myTableTitle + " 用户留存率详情");
            var startDate = $('#startTime').val();
            var endDate = $('#endTime').val();
            initTable(startDate, endDate);
        }, 'json');
    }

    function initTable(start, end) {
        $('#table').bootstrapTable('destroy').bootstrapTable({
            url: '${ctx}/admin/app-user/getUserRetention?startDate=' + start + "&endDate=" + end,
//            idField: 'id',
//            striped: true,
            mobileResponsive: true,
//            checkbox: true,
//            clickToSelect: true,
//            queryParams: queryParams,
//            responseHandler: responseHandler,
            columns: [
                {
                    field: 'date',
                    title: '时间',
                    align: 'center'
                },
                {
                    field: 'users',
                    title: '用户数',
                    align: 'center'
                },
                {
                    field: 'tomorrow',
                    title: '次日',
                    align: 'center'
                },
                {
                    field: 'threeDays',
                    title: '3日',
                    align: 'center'
                },
                {
                    field: 'week',
                    title: '7日',
                    align: 'center'
                },
                {
                    field: 'tenDays',
                    title: '10日',
                    align: 'center'
                }, {
                    field: 'fifteenDays',
                    title: '15日',
                    align: 'center'
                },
                {
                    field: 'twentyDays',
                    title: '20日',
                    align: 'center'
                },
                {
                    field: 'thirtyDays',
                    title: '30日',
                    align: 'center'
                },
            ],
            onLoadSuccess: function () {  //加载成功时执行
                var $table = $('#table tbody');
                $($table).find("tr").each(function (n, value) {
                    $(value).find("td:gt(1)").each(function (n1, td) {
                        var html = $(td).html();
                        if (html >= 0.50) {
                            $(td).addClass("level4");
                            $(td).html(Math.floor(html * 100) + "%");
                        } else if (html >= 0.35) {
                            $(td).addClass("level3");
                            $(td).html(Math.floor(html * 100) + "%");
                        } else if (html >= 0.15) {
                            $(td).addClass("level2");
                            $(td).html(Math.floor(html * 100) + "%");
                        } else if (isNaN(html)) {
                            $(td).addClass("level5");
                            $(td).html("");
                            $(td).css("border", "none");
                        } else {
                            $(td).addClass("level1");
                            $(td).html(Math.floor(html * 100) + "%");
                        }
                    })
                })
                topLayer.closeAll('loading');
            },
        });
    }

    function generatingChart() {
        var startDate = $('#startTime').val();
        var endDate = $('#endTime').val();
        if (startDate != "" && endDate != "") {
            getData('${ctx}/admin/report/getUserRetention?startTime=' + startDate + '&endTime=' + endDate + '&type=' + $('#dateType').val());
        }
    }

</script>
</body>
</html>